<template>
  <div class="manDetail-main">
    <div class="com-header">
        <button class="back" @click="$router.go(-1)"><i></i></button>
        <span>{{titleName}}</span>
    </div>
    <div class="tab-wrapper">
        <span class="tab-item" v-for="(item,index) in typeArr" :key="index">
            <button :class="{'select-btn': typeFlag==item.flag}" @click="typeClick(item.flag)">{{item.title}}</button>
            <span class="line" v-if="typeFlag==item.flag"></span>
        </span>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content">
       <div class="wrapper">
            <ul>
                <router-link tag="li" :to="'/novelDetail/'+item.book_id" v-for="(item,index ) in currentData" :key="index">
                    <div class="left"><img :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null"></div>
                    <div class="right">
                        <p class="ellipsis title">{{item.name}}</p>
                        <p class="ellipsis">{{item.author}}</p>
                        <p class="ellipsis">{{item.intro}}</p>
                        <p class="ellipsis">{{item.marknum}}人在追 | {{item.retention}}读者留存</p>
                    </div>
                </router-link>
            </ul>
       </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import api from '~/plugins/api.js'
  import axios from 'axios'
  export default {
    head() {
        return{
            title: `${this.titleName}-快眼看书`,
            meta: [{
                name: 'description',
                content: `快眼看书专注于小说搜索,排行榜,${this.titleName}`
            },{
                name: 'keyWords',
                content: `快眼看书,kuaiyankanshu,追书最热榜,${this.titleName},读者留存榜,完结榜,男生,女生,小说排行`
            }]
        } 
    },
    data () {
      return {
          typeArr:[{
             title: '周榜',
             flag: 'week'
         },{
             title: '月榜',
             flag: 'month'
         },{
             title: '总榜',
             flag: 'all'
         }],
         typeFlag: 'week',
         rankingList: {},
         currentData: [],
         titleName: '收藏榜'
      }
    },
    created(){
        this.titleName = this.$route.query.title
        if(!process.server){
            this.getRankinglist()
        }
    },
    mounted() {
        
    },
    methods: {
      typeClick(flag) {
          this.typeFlag = flag
          this.currentData = this.rankingList[this.typeFlag]
          
      },
      async getRankinglist() {
        let _this = this
        let parame = {
            gender: this.$route.query.gender,
            type: this.$route.query.type,
            range:	''
        }
        let rankingList = await axios.get(api.rankingList,{params:parame})
        if(rankingList){
            _this.rankingList = rankingList.data.data
            _this.currentData = _this.rankingList[_this.typeFlag]
        }
      }
    },
    async asyncData(content){
        // console.log('asyncData---------',process.server)
        let data = {}
        let currentData = []
        if(process.server){
            let parame = {
                gender: content.query.gender,
                type: content.query.type,
                range:	''
            }
            let rankingList = await axios.get(api.rankingList,{params:parame})
            if(rankingList){
                data = rankingList.data.data
                currentData = data.week
                return {'rankingList':data,'currentData':currentData}
            }
        }
    
    }
  }
</script>
